<template>
  <el-container>
    <!-- 顶部横幅 -->
    <el-header style="height: 200px; padding: 0;">
      <div class="banner">
        <img src="/start/top_train.jpg" alt="Banner" class="banner-image">
        <div class="banner-title">智能铁路售票系统</div>
        <div class="search-bar">
          <el-input v-model="searchQuery" placeholder="请输入搜索内容" class="search-input"/>
          <el-dropdown placement="bottom" @command="handleUserCommand" style="display: flex; align-items: center; gap: 10px;">
       <span class="user-info">
       <el-avatar :src="user.avatar || 'https://cn.bing.com/images/search?view=detailV2&ccid=1lEIKFtG&id=21D9D21D3EDDB6FFA2EBE757D9B43C38EEBF2DD7&thid=OIP.1lEIKFtGBxlZQ5CvNN02NwHaEJ&mediaurl=https%3A%2F%2Fimg.shetu66.com%2F2023%2F05%2F15%2F1684145546043869.png&exph=574&expw=1024&q=%e5%9b%be%e7%89%87&simid=607993720447256772&form=IRPRST&ck=1971E46CAC2D822E2FD8682F7045CB91&selectedindex=2&itb=0&ajaxhist=0&ajaxserp=0&cdnurl=https%3A%2F%2Fts1.tc.mm.bing.net%2Fth%2Fid%2FR-C.d65108285b460719594390af34dd3637%3Frik%3D1y2%252f7jg8tNlX5w%26pid%3DImgRaw%26r%3D0&vt=0&sim=11'" />
      <span class="user-name">美好的一天将要启程！{{ user.name || '游客' }}</span>
          </span>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item command="profile">个人中心</el-dropdown-item>
      <el-dropdown-item command="settings">设置</el-dropdown-item>
      <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 导航菜单 -->
    <el-main style="padding: 10px 0;">
      <el-row :gutter="20" justify="flow-spacing">
        <el-col v-for="(item, index) in navItems" :key="index" :span="4">
          <el-link :href="item.link" type="primary" class="nav-link">{{ item.title }}</el-link>
        </el-col>
      </el-row>
    </el-main>

    <!-- 轮播图 -->
    <el-footer style="padding: 0;">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <img :src="item.image" alt="Carousel" class="carousel-image">
        </el-carousel-item>
      </el-carousel>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: localStorage.getItem('user_name') || '',
        avatar: localStorage.getItem('user_avatar') || '',
    },
      searchQuery: '',
      navItems: [
        { title: '首页', link: '/#/HelloWorld' },
        { title: '城市管理', link: '/#/CityManagement' },
        { title: '列车管理', link: '/#/services' },
        { title: '路线管理', link: '/about' },
        { title:'价格管理',link:'/price'},
        { title: '车站管理',link:'/station'},
        { title: '用户管理', link: '/contact' }
      ],
      carouselItems: [
        { image: 'public/start/carousel1.jpg' },
        { image: 'public/start/carousel2.jpg' },
        { image: 'public/start/carousel3.jpg' }
      ]
    };
  }
};
</script>

<style scoped>
.banner {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 60%;
  object-fit: cover;
}

.search-bar {
  position: absolute;
  bottom: 20px; /* 距离底部 20px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  width: 60%;
  z-index: 2;
  
}

.search-input {
  flex: 1;
}

.auth-link {
  font-size: 12px;
  align-self: center;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-title {
  position: absolute;
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 精准居中 */
  font-size: 36px;
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* 文字阴影 */
  z-index: 2; /* 确保在图片和其他元素之上 */
}

.nav-link {
  display: block;
  text-align: center;
  color: rgb(255, 255, 255) !important; /* 强制覆盖默认颜色 */
  text-decoration: none;
  font-weight: bold;
  background-color: #8dc1fc;
}

/* 链接悬停效果 */
.nav-link:hover,
.nav-link:focus {
  color: #0376f9 !important; /* 浅蓝悬停效果 */
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}


/* 下拉菜单样式 */
.el-dropdown-menu {
  min-width: 120px;
}

.el-dropdown-item__icon {
  margin-right: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-info:hover .user-name {
  color: rgb(0, 0, 0) !important; /* 悬停文字变白 */
}

.user-info:focus,
.user-info:active {
  outline: none !important;
  transform: scale(1.02); /* 可选微动效 */
}

</style>